import React, { PureComponent } from 'react'
import Topic from './components/Topic'
import List from './components/List'
import Writer from './components/writer'
import Recomme from './components/Recomme'
import { connect } from 'react-redux'
import { actionCreator } from './store'
import {
  HomeWrapper,
  HomeLeft,
  HomeRight,
  BackTop
} from './style';

class Home extends PureComponent {
  handleScroll () {
    window.scrollTo(0, 0)
  }

  componentDidMount () {
    this.props.changeHomeData()
    this.bindEvents()
  }
  bindEvents () {
    window.addEventListener('scroll', this.props.changeScrollTopShow)
  }

  componentWillUnmount () {
    window.removeEventListener('scroll', this.props.changeScrollTopShow)
  }

  render () {
    return (
      <div>
        <HomeWrapper>
          <HomeLeft>
            <img className='banner-img' alt='' src="//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
            <Topic />
            <List />
          </HomeLeft>
          <HomeRight>
            <Recomme />
            <Writer />
          </HomeRight>
          {
            this.props.showScroll ? <BackTop onClick={this.handleScroll}>顶部</BackTop> : null
          }

        </HomeWrapper>

      </div>
    )
  }
}


const mapState = (state) => ({
  showScroll: state.getIn(['home', 'showScroll'])
})
const mapDispatch = (dispatch) => ({

  changeHomeData () {
    const action = actionCreator.getHomeInfo()
    dispatch(action)
  },
  changeScrollTopShow () {
    if (document.documentElement.scrollTop > 400) {
      dispatch(actionCreator.toggleToShow(true))
    } else {
      dispatch(actionCreator.toggleToShow(false))
    }
  }

})


export default connect(mapState, mapDispatch)(Home)
